<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //创建点击事件：
        function onclickFun() {
            //获取标签对象
            var UN=document.getElementById("username");
            //获取输入框的值
            /**
             * value():获取输入框的值
             */
            var usernameText=UN.value;
            //alert(usernameText);
            //利用正则表达式，判断输入数据是否符合要求
            var patt=/^\w{5,12}$/;
            //获取提示内容对象
            var spanText=document.getElementById("UNspan");
            //alert(spanText.innerHTML="刘明福好帅！");
            if(patt.test(usernameText)){
                /**
                 *   innerHTML()方法： 获取该调用标签的起始标签和结束标签中间的内容,
                 *   且会显示出来，标签在什么位置，就显示在哪个位置
                 *   innerHTML 这个属性可读，可写
                 */
                spanText.innerHTML="用户名合法！";
                // alert("合法");
            }else{
                spanText.innerHTML="用户名非法！";
                // alert("非法");

            }
        }
    </script>
</head>
<body>
    用户账号：<input type="text" id="username" value="username"/><button onclick="onclickFun()">验证</button>
            <span style="color: red" id="UNspan"></span>

</body>
</html>